/*
 * @Description: 中间内容
 * @Date: 2021-03-10 18:18:12
 * @Author: 黄治恩
 */
import React, { Component } from 'react';
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'

import { updateShowFixed } from '@/store/actions/showFixed'
import { debounce } from '@/utils/utils'

import Sort from './Sort'
import ArticleItem from '@/components/Article/List-item/List-item'

import './style.scss'

export interface search_params {
  type:number,
  time:number
}

interface Props_type  {
  showFixed:boolean,
  updateShowFixed:Function
}

class TimelineList extends Component<Props_type> {
  
  state = {
    search:{
      pageNum:1,
      type:1,
      time:1
    },
    list:[
      {
        id:nanoid()
      },
      {
        id:nanoid()
      },
      {
        id:nanoid()
      },
      {
        id:nanoid()
      },
      {
        id:nanoid()
      },
      {
        id:nanoid()
      },
      {
        id:nanoid()
      },
      {
        id:nanoid()
      },
      {
        id:nanoid()
      },
      {
        id:nanoid()
      }
    ],
    scrollFun:null, // 滚动条事件，用于离开页面清除事件
  }

  componentDidMount(){
    let scrollFun:any = this.state.scrollFun
    scrollFun = () => this.handleScroll()
    this.setState({scrollFun})
    window.addEventListener('scroll', scrollFun);	
  }

  componentWillUnmount(){
    let scrollFun:any = this.state.scrollFun
    window.removeEventListener('scroll',scrollFun)
  }

  // 滚动条事件
  handleScroll = () => {
    const aside:Element | null = document.querySelector('.index-aside');
    const clientHeight = aside?.clientHeight || 0;
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const bodyClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    
    // 右侧广告
    if(scrollTop >= clientHeight){
      this.props.updateShowFixed(true)
    }else{
      this.props.updateShowFixed(false)
    }

    // 触底刷新数据
    if(scrollHeight > bodyClientHeight && scrollTop + bodyClientHeight + 100 >= scrollHeight) {
      const { pageNum } = this.state.search
      const newPageNum = pageNum + 1
      this.getData(newPageNum)
    }
  }

  /**
   * @description 更新搜索条件
   */
  updateSearch = (params:search_params) => {
    console.log(1,params);
  }
  
  /**
   * @description 获取数据
   */
  getData = debounce((pageNum:number = 1) => {
    let { search, list } = this.state
    search.pageNum = pageNum
    const data = list.map( it => {
      let obj = {...it}
      obj.id = `${it.id}_${pageNum}`
      return obj
    }).slice(0,10)
    list = [...list,...data]
    this.setState({search,list})
  },300)

  render() {
    const { list } = this.state
    return (
      <div className="timeline-list">
        <Sort updateSearch={this.updateSearch} />
        <div className="list-box">
          <ul className="article-list">
            {
              list.map( item => (
                <ArticleItem key={item.id} {...item} />
              ))
            }
          </ul>
        </div>
      </div>
    );
  }
}

export default connect(
  (state:{showFixed:boolean})  => ({
    showFixed:state.showFixed
  }),
  {
    updateShowFixed
  }
)(TimelineList);